<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="./script/vue-router.min.js"></script>

</head>
<body>
<div id = "app">
    <h1>Hello App!</h1>
    <p>
<!--        // 使用router-link 组件进行导航-->
<!--        // to 属性指定链接-->
<!--        // router-link 会被默认渲染程一个<a>标签-->
        <router-link to='/foo'>Go to Foo</router-link>
        <router-link to='/bar'>Go to Bar</router-link>
    </p>
<!--    // 路由出口-->
<!--    // 路由匹配到的组件被渲染在这里-->
    <router-view></router-view>
</div>

<script>
    // 组件，可以是任何形式创建的组件
    const foo= {template:`<div>fo</div>`}
    const bar= {template:`<div>bar</div>`}

    //1、定义路由
    // path:映射地址
    // component:映射的组件
    const routes=[
        {path:'/foo',component :foo},
        {path:'/bar',component :bar}
    ]
    // 2、创建路由实例，传入配置参数
    const router =new VueRouter({
        routes
    })

    // 3、创建和挂在跟实例
    // 通过router配置参数注入路由
    const app =new Vue({
        router
    }).$mount("#app")// 挂在到id="app"上
</script>
<script>
</script>
</body>
</html>